<!--收付款合同-->
<template>
  <div class="contract">
    <div class="top-title">{{ title }}</div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="90px" class="demo-ruleForm">
      <div class="tab-part">
        <span class="part-line"></span>
        <span class="part-title">基本信息</span>
      </div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="合同名称" prop="contractName">
            <el-input v-model="ruleForm.contractName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="合同编号" prop="contractNumber">
            <el-input v-model="ruleForm.contractNumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="合同状态" prop="contractStatus">
            <el-select v-model="ruleForm.contractStatus" placeholder="请选择合同状态">
              <el-option label="履行" value="1"></el-option>
              <el-option label="终止" value="2"></el-option>
              <el-option label="解除" value="3"></el-option>
              <el-option label="中止" value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="收支类型" prop="paymentType">
            <el-select v-model="ruleForm.paymentType" placeholder="请选择收支类型">
              <el-option
                v-for="item in paymentTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="签订日期" prop="signDate">
            <el-date-picker
              v-model="ruleForm.signDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="有效期" prop="validity">
            <el-date-picker
              v-model="ruleForm.validity"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="合同文本" prop="contractText">
            <el-input v-model="ruleForm.contractText"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属项目" prop="project">
            <el-input v-model="ruleForm.project"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="tab-part">
        <span class="part-line"></span>
        <span class="part-title">相对方信息</span>
      </div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="名称" prop="facingEachOther">
            <el-input v-model="ruleForm.facingEachOther"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="编码" prop="facingEachOtherNumber">
            <el-input v-model="ruleForm.facingEachOtherNumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="法人代表" prop="legalPerson">
            <el-input v-model="ruleForm.legalPerson"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="联系人" prop="contacts">
            <el-input v-model="ruleForm.contacts"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系方式" prop="mode">
            <el-input v-model="ruleForm.mode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="地址" prop="addr">
            <el-input v-model="ruleForm.addr"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="开户行" prop="bank">
            <el-input v-model="ruleForm.bank"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="银行账号" prop="bankAccount">
            <el-input v-model="ruleForm.bankAccount"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="tab-part">
        <span class="part-line"></span>
        <span class="part-title">收付款信息</span>
      </div>
      <el-row>
        <el-col :span="6">
          <el-form-item label="合同金额" prop="contractFee">
            <el-input v-model="ruleForm.contractFee"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="收付款总额" prop="totalFee">
            <el-input v-model="ruleForm.totalFee"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="剩余余额" prop="remainingFee">
            <el-input v-model="ruleForm.remainingFee"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-table :data="tableData" border style="width: 100%;">
        <el-table-column prop="id" label="序号" width="200px"></el-table-column>
        <el-table-column prop="signDate" label="日期"></el-table-column>
        <el-table-column prop="totalFee" label="金额"></el-table-column>
      </el-table>
      <div v-if="ModalType=='add'" class="dialog-footer">
        <el-button @click="closeModal">取 消</el-button>
        <el-button type="primary" @click="save('ruleForm')">保 存</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'paymentContract',
  data() {
    return {
      ruleForm: {
        contractName: '',
        contractNumber: '',
        contractStatus: '',
        paymentType: '',
        signDate: '',
        validity: '',
        contractText: '',
        project: '',
        facingEachOther: '',
        facingEachOtherNumber: '',
        legalPerson: '',
        contacts: '',
        mode: '',
        addr: '',
        bank: '',
        bankAccount: '',
        contractFee: '',
        totalFee: '',
        remainingFee: ''
      },
      rules: {
        contractName: [
          { required: true, message: '请输入合同名称', trigger: 'blur' },
          { max: 20, message: '长度最大20个字符', trigger: 'blur' }
        ],
        contractNumber: [
          { required: true, message: '请输入合同编号', trigger: 'blur' }
        ],
        signDate: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        facingEachOther: [
          { required: true, message: '请输入相对方名称', trigger: 'change' }
        ],
        facingEachOtherNumber: [
          { required: true, message: '请选择相对方编码', trigger: 'change' }
        ],
        validity: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        contractFee: [
          { required: true, message: '请输入合同金额', trigger: 'change' }
        ]
      },
      paymentTypeOptions: [
        { label: '收款', value: '0' },
        { label: '付款', value: '1' }
      ],
      tableData: []
    }
  },
  props: {
    title: {
      type: String,
      default: () => ''
    },
    row: {
      type: Object,
      default: () => {
      }
    },
    //关闭弹窗
    closeModal: {
      type: Function,
      default: null
    },
    ModalType:{
      type: String,
      default: ''
    }
  },
  watch: {
    row(n) {
      if (Object.keys(n).length !== 0) {
        this.ruleForm = Object.assign({}, n)
      }
    }
  },
  mounted() {
    if (Object.keys(this.row).length !== 0) {
      this.ruleForm = Object.assign({}, this.row)
    }
  },
  methods:{

    save(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message.success('保存成功！')
          this.closeModal();
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.contract {

  .top-title {
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    background: #1ab394;
    padding: 16px;
    align-items: center;
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
  }

  .tab-part {
    display: flex;
    align-items: center;
    border-bottom: 2px solid #e7eff3;
    padding-bottom: 10px;
    margin-bottom: 16px;

    .part-line {
      display: inline-block;
      width: 4px;
      height: 16px;
      background-color: #1ab394;
      float: left;
      margin-top: 2px;
      margin-right: 10px;
    }

    .part-title {
      font-weight: bold;
    }
  }

  .dialog-footer{
    display: flex;
    justify-content: flex-end;
    margin-top: 16px
  }
}
</style>
